<template>
  <el-container class="main">
    <!---header-->
    <el-header>
      <!-- 查询条件-->
      <div class="filter-container">
        <el-col :span="3">
          <el-date-picker
            v-model="listQuery.Dt"
            type="date"
            placeholder="请选择日期"
            style="width: 100%"
            format="yyyy-MM-dd"
          />
        </el-col>
        <el-select
          v-if="this.logincpnid == 'system'"
          v-model="listQuery.cpnID"
          filterable
          clearable
          class="filter-item"
          placeholder="请选择企业"
          :filter-method="cpnmatch"
          @clear="cpnmatch"
        >
          <el-option
            v-for="item in cpnoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span v-html="item.label" />
          </el-option>
        </el-select>

        <el-select
          v-model="listQuery.trialStt"
          class="filter-item"
          placeholder="请选择审核状态"
          clearable
        >
          <el-option
            v-for="item in trialSttoptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
            <span v-html="item.label" />
          </el-option>
        </el-select>
        <el-input
          v-model="listQuery.bllNo"
          placeholder="请输入单据号"
          style="width: 300px"
          class="filter-item"
          @keyup.enter.native="handleFilter"
        />

        <el-button
          class="filter-item seachbttn"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
          >查询</el-button
        >
        <el-button
          class="filter-item seachbttn"
          type="primary"
          @click="handleFilterref"
        >
          清空
        </el-button>
      </div>
      <div
        class="filter_fenge"
        style="border: none; border-top: 1px solid #d1ddeb"
      />
      <!--
        <div class="filter-container">
        <el-button
          class="filter-item bttnleft"
          type="primary"
          @click="handleFilterref"
          ><i
            class="el-icon-refresh"
            style="padding-right: 5px"
          />刷新</el-button
        >
      </div>
     -->
    </el-header>
    <!---header-->

    <!--content-->
    <el-container style="margin-top: 10px !important">
      <el-aside width>
        <el-table
          v-loading="listLoading"
          :data="CpnActCfgBllData"
          fit
          stripe
          highlight-current-row
          style="width: 100%; margin-top: 0"
          @current-change="handleCurrentChange"
        >
          <el-table-column label="企业" align="left" min-width="150px">
            <template slot-scope="{ row }">
              <span>{{ row.cpnIDStr }}</span>
            </template>
          </el-table-column>
          <el-table-column label="操作类型" align="left" min-width="50px">
            <template slot-scope="{ row }">
              <span>{{ row.handleTypName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="审核状态" align="left" min-width="100px">
            <template slot-scope="{ row }">
              <span v-if="row.stt == 0" style="color: #e6a23c">待审核</span>
              <span v-else-if="row.stt == 1" style="color: #67c23a"
                >审核通过</span
              >
              <span v-else-if="row.stt == 2" style="color: #f56c6c"
                >审核拒绝</span
              >
              <span v-else-if="row.stt == 3" style="color: #f56c6c"
                >已作废</span
              >
            </template>
          </el-table-column>
          <el-table-column label="更新时间" align="left" min-width="100px">
            <template slot-scope="{ row }">
              <span>{{ row.upTime }}</span>
            </template>
          </el-table-column>
          <el-table-column label="经办人" align="left" min-width="80px">
            <template slot-scope="{ row }">
              <span>{{ row.uptr }}</span>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="listQuery.total > 0"
          :total="listQuery.total"
          :page.sync="listQuery.page"
          :limit.sync="listQuery.limit"
          @pagination="fetchData(this)"
        />
      </el-aside>
      <el-main v-loading="formLoading">
        <div
          v-for="(cfgbll, index) in historycfgbll"
          :key="index"
          class="rightdiv"
        >
          <div v-show="index <= 0" class="newinfodiv">
            <div class="bllno_sttdiv">
              <div class="bllnodiv">
                <div class="bllnospan">{{ cfgbll.bllNo }}</div>
                <div class="bllnoname">单据号</div>
              </div>
              <div
                v-if="cfgbll.stt == 0"
                class="sttdiv"
                style="background: #f2b769"
              >
                <span class="sttname">待审核</span>
              </div>
              <div
                v-else-if="cfgbll.stt == 1"
                class="sttdiv"
                style="background: green"
              >
                <span class="sttname">审核通过</span>
              </div>
              <div
                v-else-if="cfgbll.stt == 2"
                class="sttdiv"
                style="background: #999999"
              >
                <span class="sttname">审核拒绝</span>
              </div>
              <div
                v-else-if="cfgbll.stt == 3"
                class="sttdiv"
                style="background: #999999"
              >
                <span class="sttname">已作废</span>
              </div>
            </div>
            <div class="linediv" />
            <div class="infocontentdiv">
              <div class="infocontent_line">
                <div class="infocontent_item_1">
                  <span class="infocontent_item_name">企业：</span>
                  <span class="infocontent_item_content">{{
                    cfgbll.cpnIDStr
                  }}</span>
                </div>
                <div class="infocontent_item_2">
                  <span class="infocontent_item_name">账户别名：</span>
                  <span class="infocontent_item_content">{{
                    cfgbll.alisNme
                  }}</span>
                </div>
                <div class="infocontent_item_3">
                  <span class="infocontent_item_name">创建人：</span>
                  <span class="infocontent_item_content">{{
                    cfgbll.createUsr
                  }}</span>
                </div>
              </div>
              <div class="infocontent_line">
                <div class="infocontent_item_1">
                  <span class="infocontent_item_name">提交时间：</span>
                  <span class="infocontent_item_content">{{
                    cfgbll.crtTime
                  }}</span>
                </div>
                <div class="infocontent_item_2">
                  <span class="infocontent_item_name">支付通道：</span>
                  <span class="infocontent_item_content">{{
                    cfgbll.payChannelStr
                  }}</span>
                </div>
                <div class="infocontent_item_3">
                  <span class="infocontent_item_name">支付类型：</span>
                  <span class="infocontent_item_content">{{
                    cfgbll.pyTyps
                  }}</span>
                </div>
              </div>
              <div class="infocontent_line">
                <div class="infocontent_item_1">
                  <span class="infocontent_item_name">支付方式：</span>
                  <span class="infocontent_item_content">{{
                    cfgbll.payTyp
                  }}</span>
                </div>
              </div>

              <div
                v-for="(d, e) in cfgbll.payconfigs"
                v-if="d.show"
                :key="e"
                class="infocontent_line"
              >
                <div
                  class="infocontent_item_auto"
                  :class="d.keyval.length >= 100 ? 'Scroll' : ''"
                >
                  <span class="infocontent_item_name">{{ d.comment }}：</span>
                  <span class="infocontent_item_content">
                    <!-- 如果是json数据格式的密钥等调整样式，如果不是正常输出 -->
                    <template
                      v-if="
                        typeof isJson(d.keyval) == 'object' && d.keyval != ''
                      "
                    >
                      <div
                        v-for="item in isJson(d.keyval)"
                        :key="item.code"
                        style="white-space: nowrap"
                      >
                        {{ item }}
                      </div>
                    </template>
                    <template v-else>
                      {{ d.keyval }}
                    </template>
                  </span>
                </div>
              </div>
            </div>
            <div v-show="cfgbll.stt != 0" class="infocontent_line">
              <div class="infocontent_item_auto">
                <span class="infocontent_item_name" style="color: red"
                  >修改/拒绝/通过理由：</span
                >
                <span class="infocontent_item_content" style="color: red">{{
                  cfgbll.brf
                }}</span>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button
                v-if="Jurisdiction('审核') && cfgbll.stt == 0"
                type="success"
                icon="el-icon-circle-check"
                @click="auditTest()"
                >审核测试</el-button
              >
              <el-button
                v-if="Jurisdiction('AuditPass') && cfgbll.stt == 0"
                type="success"
                icon="el-icon-circle-check"
                @click="saveForm2()"
                >审核通过</el-button
              >
              <el-button
                v-if="Jurisdiction('审核') && cfgbll.stt == 0"
                type="danger"
                style="margin-right: 20px"
                icon="el-icon-circle-close"
                @click="ApprovedClick()"
                >审核拒绝</el-button
              >
            </div>
            <div class="Dividingline" />
          </div>
          <div v-show="index > 0" class="oldinfodiv">
            <div class="historydiv">
              <img
                src="@/assets/oldrecord.png"
                width="14px"
                height="14px"
                title="历史提交记录"
              />&nbsp;历史提交记录
            </div>
            <div class="oldinfocontent">
              <div class="bllno_sttdiv">
                <div class="bllnodiv">
                  <div class="bllnospan">{{ cfgbll.bllNo }}</div>
                  <div class="bllnoname">单据号</div>
                </div>
                <div class="sttdiv" style="background: #999999">
                  <span class="sttname">{{ cfgbll.sttStr }}</span>
                </div>
              </div>
              <div class="linediv" />
              <div class="infocontentdiv">
                <div class="infocontent_line">
                  <div class="infocontent_item_1">
                    <span class="infocontent_item_name">企业：</span>
                    <span class="infocontent_item_content">{{
                      cfgbll.cpnIDStr
                    }}</span>
                  </div>
                  <div class="infocontent_item_2">
                    <span class="infocontent_item_name">账户别名：</span>
                    <span class="infocontent_item_content">{{
                      cfgbll.alisNme
                    }}</span>
                  </div>
                  <div class="infocontent_item_3">
                    <span class="infocontent_item_name">创建人：</span>
                    <span class="infocontent_item_content">{{
                      cfgbll.createUsr
                    }}</span>
                  </div>
                </div>
                <div class="infocontent_line">
                  <div class="infocontent_item_1">
                    <span class="infocontent_item_name">提交时间：</span>
                    <span class="infocontent_item_content">{{
                      cfgbll.crtTime
                    }}</span>
                  </div>
                  <div class="infocontent_item_2">
                    <span class="infocontent_item_name">支付通道：</span>
                    <span class="infocontent_item_content">{{
                      cfgbll.payChannelStr
                    }}</span>
                  </div>
                  <div class="infocontent_item_3">
                    <span class="infocontent_item_name">支付类型：</span>
                    <span class="infocontent_item_content">{{
                      cfgbll.pyTyps
                    }}</span>
                  </div>
                </div>
                <div class="infocontent_line">
                  <div class="infocontent_item_1">
                    <span class="infocontent_item_name">支付方式：</span>
                    <span class="infocontent_item_content">{{
                      cfgbll.payTyp
                    }}</span>
                  </div>
                </div>
                <div class="refusediv">
                  <div class="infocontent_line" style="margin-top: 10px">
                    <div class="infocontent_item_1">
                      <span class="infocontent_item_name">审核人员：</span>
                      <span class="infocontent_item_content">{{
                        cfgbll.uptr
                      }}</span>
                    </div>
                    <div class="infocontent_item_2">
                      <span class="infocontent_item_name">审核时间：</span>
                      <span class="infocontent_item_content">{{
                        cfgbll.upTime
                      }}</span>
                    </div>
                  </div>
                  <div class="infocontent_line">
                    <div class="infocontent_item_auto">
                      <span class="infocontent_item_name" style="color: red"
                        >修改/拒绝理由：</span
                      >
                      <span
                        class="infocontent_item_content"
                        style="color: red"
                        >{{ cfgbll.brf }}</span
                      >
                    </div>
                  </div>
                </div>
              </div>

              <div
                v-for="(d, e) in cfgbll.payconfigs"
                v-if="d.show"
                :key="e"
                class="infocontent_line"
              >
                <div class="infocontent_item_auto">
                  <span class="infocontent_item_name">{{ d.comment }}：</span>
                  <span class="infocontent_item_content">
                    {{ d.keyval }}
                  </span>
                </div>
              </div>
              <div class="Dividingline" />
            </div>
          </div>
        </div>
      </el-main>
    </el-container>
    <el-dialog
      :visible.sync="cpnActCfgBll_dialogVisible"
      width="50%"
      :before-close="handleClose"
      :show-close="false"
      class="cpnActCfgBll_dialog"
    >
      <el-form :model="form">
        <el-steps :active="active" finish-status="success">
          <el-step title="配置信息测试" />
          <el-step title="支付功能测试" />
          <el-step title="审核通过" />
        </el-steps>
        <!--配置信息测试-->
        <div :class="{ divshow: divid == 0, divnone: divid != 0 }">
          <div class="first_title">配置信息测试</div>
          <div
            v-loading="auditLoading"
            class="cfg_test"
            element-loading-text="配置测试中,请稍后..."
            element-loading-spinner="el-icon-loading"
          >
            <div class="cfg_divinlinecls">
              <div class="cfg_test_pyt_title">支付方式</div>
              <div class="cfg_test_res_title">测试结果</div>
            </div>

            <div
              v-for="item in auditTests"
              :key="item.payTyp"
              class="cfg_divinlinecls"
            >
              <div class="cfg_test_pyt">{{ item.payTypName }}</div>
              <div v-if="item.success" class="cfg_test_res">成功</div>
              <div v-if="!item.success" class="cfg_test_res_error">
                失败
                <el-tooltip placement="top" class="commenttop">
                  <div slot="content">{{ item.errmsg }}</div>
                  <img src="@/assets/cfg_err.png" class="cfg_errimg" />
                </el-tooltip>
              </div>
            </div>
          </div>
        </div>
        <!--支付功能测试-->
        <div :class="{ divshow: divid == 1, divnone: divid != 1 }">
          <div class="first_title">支付测试与校验</div>
          <div
            v-loading="auditLoading"
            class="cfg_act"
            element-loading-text="支付进行中,请稍后..."
            element-loading-spinner="el-icon-loading"
          >
            <div
              v-for="item in auditTests"
              :key="item.payTyp"
              class="cfg_act_test"
            >
              <span class="cfg_act_test_word"
                >支付方式：
                <span class="cfg_act_test_word1">{{ item.payTypName }}</span>
                <span class="cfg_act_test_word2">；</span>
                <span class="cfg_act_test_word3">付款码</span>
              </span>
              <div style="overflow: hidden">
                <div class="pay_input">
                  <el-input
                    v-model="item.authcode"
                    class=""
                    placeholder="请输入付款码"
                    style="width: 100%"
                    @keyup.enter.native="payTest(item.payTyp, item)"
                  />
                </div>
                <div class="pay_button">
                  <el-button
                    v-if="item.isCheck && item.type == 1"
                    type="success"
                    icon="el-icon-check"
                    circle
                  />
                  <el-tooltip
                    v-if="!item.isCheck && item.type == 1"
                    placement="top"
                    class="commenttop"
                  >
                    <div slot="content">
                      {{ item.errmsg == "" ? "配置有误" : item.errmsg }}
                    </div>
                    <el-button type="danger" icon="el-icon-close" circle />
                  </el-tooltip>
                  <el-checkbox-button
                    v-if="item.isCheck && item.type == 1"
                    v-model="item.isCheckAct"
                    @change="CheckAct()"
                    >校验</el-checkbox-button
                  >
                  <el-button
                    v-if="!item.isCheck"
                    type="primary"
                    @click="payTest(item.payTyp, item)"
                    >支付测试</el-button
                  >
                </div>
              </div>
            </div>
          </div>
        </div>
        <!--配置信息测试-->
        <div :class="{ divshow: divid == 2, divnone: divid != 2 }">
          <div class="first_title">预览</div>
        </div>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button v-if="divid != 0" style="float: left" @click="prv"
          >上一步</el-button
        >
        <el-button @click="cpnActCfgBll_dialogVisible = false">取 消</el-button>
        <el-button v-if="cfgpass && divid < 1" type="primary" @click="next()"
          >下一步</el-button
        >
        <el-button
          v-if="divid == 1 && actpass"
          type="primary"
          @click="saveForm(1)"
          >审核通过</el-button
        >
        <el-button
          v-if="!actpass || !cfgpass"
          type="danger"
          @click="ApprovedClick()"
          >审核拒绝</el-button
        >
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="cpnActCfgBllApproved_dialogVisible"
      width="50%"
      :before-close="handleClose"
      :show-close="false"
      class="cpnActCfgBllApproved_dialogVisible"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        label-position="top"
      >
        <div class="first_title">审核拒绝</div>
        <el-form-item>
          <el-select v-model="form.AprvdTyp" placeholder="选择拒绝类型">
            <el-option label="配置有误" value="0" />
            <!---<el-option label="三方异常" value="1"></el-option>--->
          </el-select>
        </el-form-item>
        <el-form-item label="拒绝理由">
          <el-input v-model="AprvdComt" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cpnActCfgBllApproved_dialogVisible = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="saveForm(2)">确定</el-button>
      </span>
    </el-dialog>

    <el-dialog
      :visible.sync="cpnActCfgBllApproved_dialogVisible2"
      width="50%"
      :before-close="handleClose"
      :show-close="false"
      class="cpnActCfgBllApproved_dialogVisible"
    >
      <el-form
        ref="form"
        :model="form"
        label-width="120px"
        label-position="top"
      >
        <el-form-item label="通过理由">
          <el-input v-model="AprvdComt" type="textarea" />
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cpnActCfgBllApproved_dialogVisible2 = false"
          >取 消</el-button
        >
        <el-button type="primary" @click="saveForm(1)">确定</el-button>
      </span>
    </el-dialog>
    <!--content-->
  </el-container>
</template>

<script>
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination
import { AjaxToken, TipConfirm } from "@/api/common";
import { SelectAjax } from "@/api/common";
import { Jurisdiction } from "@/api/common";
import { Loading } from "element-ui";
import sessionStorage from "@/api/Storage";
import "url-search-params-polyfill"; // 兼容IE，否则无法识别URLSearchParams
export default {
  name: "CpnActCfgBll",
  components: { Pagination },
  data() {
    return {
      cpnoptions: [],
      active: 0,
      divid: 0,
      logincpnid: "",
      cfgpass: false,
      actpass: false,
      historycfgbll: [],
      cpnActCfgBll_dialogVisible: false,
      cpnActCfgBllApproved_dialogVisible: false,
      cpnActCfgBllApproved_dialogVisible2: false,
      multipleSelection: [],
      formLabelWidth: "120px",
      CpnActCfgBllData: null,
      trialSttoptions: [],
      payconfig: [],
      payoldconfig: [],
      auditTests: [],
      listQuery: {
        bllNo: "",
        total: 0,
        page: 1,
        limit: 10,
        trialStt: "",
        cpnID: "",
        Dt: "",
      },
      listLoading: true,
      formLoading: false,
      auditLoading: true,
      dialogFormVisible: false,
      dialogdetailsVisible: false,
      dialogStatus: "",
      textMap: {
        update: "修改",
        create: "添加",
      },
      form: {
        bllNo: "",
        cpnID: "",
        orgID: "",
        handleTyp: "",
        actCfgID: "",
        payTyp: "",
        payChannel: "",
        alisNme: "",
        acctCfg: "",
        act: "",
        isEmrgncy: "",
        isRc: "",
        pyTyps: "",
        brf: "",
        stt: 1,
        createUsr: "",
        createTime: "",
        uptr: "",
        uptDtt: "",
        authcode: "",
        AprvdComt: "",
        AprvdTyp: 0,
      },
      AprvdComt: "",
      oldform: {
        id: "",
        cpnID: "",
        orgID: "",
        handleTyp: "",
        actCfgID: "",
        payTyp: "",
        payChannel: "",
        alisNme: "",
        acctCfg: "",
        act: "",
        isEmrgncy: "",
        isRc: "",
        pyTyps: "",
      },
      Scroll: "Scroll",
    };
  },

  // 初始化
  created() {
    var userinfo = JSON.parse(sessionStorage.getItem("userinfo"));
    this.logincpnid = userinfo.cpnId;
    this.fetchData();
    backstage.GetEnum_TrialStt(this, false);
    backstage.GeCpntListItems(this);
  },
  methods: {
    // 判定是不是json
    isJson(val) {
      // console.log(val);
      if (val.indexOf("[") != -1) {
        try {
          return JSON.parse(val);
        } catch (e) {
          return val;
        }
      }

      return val;
    },
    CheckAct() {
      this.actpass = true;
      this.auditTests.forEach((element) => {
        if (!element.isCheckAct) {
          this.actpass = false;
        }
      });
    },
    prv() {
      this.active = this.active - 1;
      this.divid = this.active;
    },
    next() {
      if (this.active++ > 2) {
        this.active = 0;
      }
      this.divid = this.active;
    },
    // 弹层关闭
    handleClose() {},
    // 权限
    Jurisdiction(moduleActionName) {
      return Jurisdiction(moduleActionName, this);
    },
    // 单选
    handleCurrentChange(val) {
      this.historycfgbll = [];
      this.currentRow = val;
      this.form = val;
      // 加载右边支付配置信息
      this.payconfig = JSON.parse(this.form.acctCfg);
      var params2 = new URLSearchParams();
      params2.append("BllNo", val.bllNo);
      this.formLoading = true;
      backstage.GetCpnActCfgBllLstByBllNo(this, params2);
      // 获取历史提交信息
      if (
        this.form.handleTyp == 1 &&
        this.form.actCfgID != "" &&
        this.form.stt != 1
      ) {
        // 编辑就展示旧的数据
        var params2 = new URLSearchParams();
        params2.append("id", this.form.actCfgID);
        backstage.GetOldCpnActCfgInfo(this, params2);
      } else {
        this.oldform.id = "";
        this.payoldconfig = [];
      }
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 多选赋值
    toggleSelection(rows) {
      if (rows) {
        rows.forEach((row) => {
          this.$refs.multipleTable.toggleRowSelection(row);
        });
      } else {
        this.$refs.multipleTable.clearSelection();
      }
    },
    // 搜索
    handleFilter() {
      this.listQuery.page = 1;
      this.fetchData();
    },
    // 搜索
    handleFilterref() {
      this.listQuery = {
        bllNo: "",
        total: 0,
        page: 1,
        limit: 10,
        trialStt: "",
      };
      this.fetchData();
    },
    // 新增
    handleCreate() {
      this.dialogStatus = "create";
      this.dialogFormVisible = true;
      this.form = {
        form: {
          bllNo: "",
          cpnID: "",
          orgID: "",
          handleTyp: "",
          actCfgID: "",
          payTyp: "",
          payChannel: "",
          alisNme: "",
          acctCfg: "",
          act: "",
          isEmrgncy: "",
          isRc: "",
          pyTyps: "",
          brf: "",
          stt: 1,
          createUsr: "",
          createTime: "",
          uptr: "",
          uptDtt: "",
          authcode: "",
          AprvdComt: "",
          AprvdTyp: "0",
        },
      };
    },
    // 编辑
    handleClick(row) {
      this.form.bllNo = row.bllNo;
      this.form.cpnID = row.cpnID;
      this.form.orgID = row.orgID;
      this.form.handleTyp = row.handleTyp;
      this.form.actCfgID = row.actCfgID;
      this.form.payTyp = row.payTyp;
      this.form.payChannel = row.payChannel;
      this.form.alisNme = row.alisNme;
      this.form.acctCfg = row.acctCfg;
      this.form.act = row.act;
      this.form.isEmrgncy = row.isEmrgncy;
      this.form.isRc = row.isRc;
      this.form.pyTyps = row.pyTyps;
      this.form.brf = row.brf;
      this.form.stt = row.stt;
      this.form.createUsr = row.createUsr;
      this.form.createTime = row.createTime;
      this.form.uptr = row.uptr;
      this.form.uptDtt = row.uptDtt;
      this.dialogStatus = "edit";
      this.dialogFormVisible = true;
    },
    // 审核拒绝
    ApprovedClick() {
      /**
        * var erm = "";
      this.auditTests.forEach((element) => {
        this.AprvdComt += element.errmsg;
      });
        */
      this.AprvdComt = "";
      this.cpnActCfgBllApproved_dialogVisible = true;
    },
    // 审核通过
    saveForm(stt) {
      var arr = this.multipleSelection;
      var params = new URLSearchParams();
      if (stt == 2 && this.AprvdComt == "") {
        this.$message({
          showClose: true,
          message: "请填写拒绝理由",
          type: "error",
        });
        return;
      }
      params.append("BllNo", this.form.bllNo);
      params.append("CpnID", this.form.cpnID);
      params.append("AuditTestData", JSON.stringify(this.auditTests));
      params.append("Stt", stt);
      params.append("AprvdTyp", this.form.AprvdTyp);
      params.append("AprvdComt", this.AprvdComt);
      const loading = this.$loading({
        lock: true,
        text: "Loading",
        spinner: "filter-container",
        background: "rgba(0, 0, 0, 0.7)",
      });
      backstage.AuditPass(this, params, loading);
    },
    // 审核通过
    saveForm2() {
      this.cpnActCfgBllApproved_dialogVisible2 = true;
    },
    // 审核测试
    auditTest() {
      this.active = 0;
      this.divid = 0;
      var params = new URLSearchParams();
      params.append("BllNo", this.form.bllNo);
      params.append("CpnID", this.form.cpnID);
      params.append("PayTyp", this.form.payTyp);

      backstage.AuditTest(this, params);
      this.auditTests = [];
      this.cpnActCfgBll_dialogVisible = true;
    },
    // 支付测试
    payTest(payTyp, item) {
      var params = new URLSearchParams();
      params.append("BllNo", this.form.bllNo);
      params.append("CpnID", this.form.cpnID);
      params.append("PayTyp", payTyp);

      var authcode = "";
      item.type = 0;
      this.auditTests.forEach((element) => {
        if (payTyp == element.payTyp) {
          authcode = element.authcode;
        }
      });
      if (authcode == "" || authcode == null) {
        this.$message({
          showClose: true,
          message: "请输入付款码",
          type: "error",
        });
        return;
      }
      params.append("AuditType", 1);
      params.append("AuthCode", authcode);
      this.auditLoading = true;
      backstage.PayTest(this, params);
    },
    // 删除
    deleteClick(row) {
      var multis = [];
      var params = new URLSearchParams();
      if (row == undefined || row == "") {
        var arr = this.multipleSelection;
        if (arr == undefined || arr.length <= 0) {
          this.$message({
            showClose: true,
            message: "请至少选中一行",
            type: "error",
          });
          this.listLoading = false;
          return;
        } else {
          for (var i = 0; i < arr.length; i++) {
            multis.push(arr[i].id);
          }
          params.append("delds", JSON.stringify(multis));
        }
      } else {
        multis.push(row.id);
        params.append("delds", JSON.stringify(multis));
      }
      this.$confirm("确认删除吗？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then((a) => {
          this.listLoading = true;
          backstage.DelCpnActCfgBll(this, params);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
          this.listLoading = false;
        });
    },
    // 查询
    fetchData() {
      this.listLoading = true;
      var params = new URLSearchParams();
      params.append(
        "Parms",
        '{"page":' +
          this.listQuery.page +
          ',"rows":' +
          this.listQuery.limit +
          "}"
      );
      params.append("BllNo", this.listQuery.bllNo);
      params.append("CpnID", this.listQuery.cpnID);
      params.append("Stt", this.listQuery.trialStt);
      params.append(
        "Dt",
        this.listQuery.Dt == "" || this.listQuery.Dt == null
          ? null
          : new Date(this.listQuery.Dt).toLocaleDateString()
      );
      backstage.GetCpnActCfgBllLst(this, params);
    },
  },
};
// 后台事件
var backstage = {
  GeCpntListItems: function (thisobj) {
    SelectAjax(
      "GeCpntListItems?val=" + thisobj.form.cpnID + "",
      function (response) {
        var body = response.data;
        thisobj.cpnoptions = [];
        body.data.forEach((element) => {
          thisobj.cpnoptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  // 获取CpnActCfgBll集合
  GetCpnActCfgBllLst: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetCpnActCfgBllLst",
      params,
      "post",
      function (res) {
        thisobj.listLoading = false;
        var body = res.data.data;
        thisobj.CpnActCfgBllData = [];
        thisobj.CpnActCfgBllData = body.rows;
        thisobj.listQuery.page = body.page;
        thisobj.listQuery.total = body.records;
        var params2 = new URLSearchParams();
        params2.append("BllNo", body.rows[0].bllNo);
        thisobj.formLoading = true;
        backstage.GetCpnActCfgBllLstByBllNo(thisobj, params2);
      },
      function (err) {
        thisobj.listLoading = false;
      }
    );
  },
  // 获取历史CpnActCfgBll集合
  GetCpnActCfgBllLstByBllNo: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetCpnActCfgBllLstByBllNo",
      params,
      "post",
      function (res) {
        thisobj.listLoading = false;
        thisobj.formLoading = false;
        var body = res.data.data;

        thisobj.historycfgbll = body.rows;

        // 检测pyTyp如果是Micropay，调整为扫码支付
        if (
          thisobj.historycfgbll[0].pyTyps == "Micropay,扫码支付" ||
          thisobj.historycfgbll[0].pyTyps == "Micropay"
        ) {
          thisobj.historycfgbll[0].pyTyps = "扫码支付";
        }
        if (body.rows.length > 0) {
          // 加载右边信息
          thisobj.form = body.rows[0];
          thisobj.form.AprvdComt = "";
          thisobj.form.AprvdTyp = "0";
          // 加载右边支付配置信息
          if (thisobj.form.acctCfg != "") {
            thisobj.payconfig = JSON.parse(thisobj.form.acctCfg);
          }
          // 是编辑状态并且不是审核状态就展示旧的数据
          if (
            thisobj.form.handleTyp == 1 &&
            thisobj.form.actCfgID != "" &&
            thisobj.form.stt != 1
          ) {
            var params2 = new URLSearchParams();
            params2.append("id", thisobj.form.actCfgID);
            backstage.GetOldCpnActCfgInfo(thisobj, params2);
          } else {
            thisobj.oldform.id = "";
            thisobj.oldpayconfig = [];
          }
        }
      },
      function (err) {
        thisobj.listLoading = false;
        thisobj.formLoading = true;
      }
    );
  },
  GetEnum_TrialStt: function (thisobj, isEmpty) {
    SelectAjax(
      "GetEnum_TrialStt?isEmpty=" + isEmpty + "+&code=0",
      function (response) {
        var body = response.data;

        thisobj.trialSttoptions = [];
        body.data.forEach((element) => {
          thisobj.trialSttoptions.push({
            value: element.value,
            label: element.text,
          });
        });
      },
      function (error) {}
    );
  },
  GetOldCpnActCfgInfo: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "GetOldCpnActCfgInfo",
      params,
      "post",
      function (res) {
        var body = res.data.data;
        if (body != null) {
          thisobj.oldform = body;

          thisobj.payoldconfig = JSON.parse(thisobj.oldform.acctCfg);
        }
      },
      function (err) {}
    );
  },
  AuditCpnActCfgBll: function (thisobj, params, loading) {
    AjaxToken(
      thisobj,
      "AuditCpnActCfgBll",
      params,
      "post",
      function (res) {
        if (loading != undefined) {
          loading.close();
        }
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 2000,
          });
          thisobj.fetchData();
          thisobj.dialogFormVisible = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {}
    );
  },
  AuditTest: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "AuditTest",
      params,
      "post",
      function (res) {
        var body = res.data;
        thisobj.auditTests = body.data;
        thisobj.auditLoading = false;
        thisobj.cfgpass = true;
        thisobj.auditTests.forEach((element) => {
          var obj = element;
          if (!element.success) {
            thisobj.cfgpass = false;
          }
        });
      },
      function (err) {
        thisobj.auditLoading = false;
      }
    );
  },
  PayTest: function (thisobj, params) {
    AjaxToken(
      thisobj,
      "AuditTest",
      params,
      "post",
      function (res) {
        thisobj.auditLoading = false;
        var body = res.data;
        var newd = [];
        var rsobj = res.data.data[0];
        thisobj.auditTests.forEach((element) => {
          var obj = element;
          if (rsobj.payTyp == element.payTyp) {
            obj.isCheck = rsobj.isCheck;
            obj.type = 1;
            obj.success = true;
            obj.authcode = rsobj.authcode;
            obj.errmsg = rsobj.errmsg;
          }
          newd.push(obj);
        });
        // thisobj.auditTests=newd;
      },
      function (err) {
        thisobj.auditLoading = false;
        thisobj.cfgpass = true;
      }
    );
  },
  AuditPass: function (thisobj, params, loading) {
    AjaxToken(
      thisobj,
      "AuditPass",
      params,
      "post",
      function (res) {
        loading.close();
        var body = res.data;
        if (body.success) {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "success",
            duration: 3000,
          });
          thisobj.fetchData();
          thisobj.cpnActCfgBll_dialogVisible = false;
          thisobj.cpnActCfgBllApproved_dialogVisible = false;
          thisobj.cpnActCfgBllApproved_dialogVisible2 = false;
        } else {
          thisobj.$message({
            showClose: true,
            message: body.message,
            type: "error",
          });
        }
      },
      function (err) {
        thisobj.fetchData();
        thisobj.cpnActCfgBll_dialogVisible = false;
        thisobj.cpnActCfgBllApproved_dialogVisible = false;
        thisobj.cpnActCfgBllApproved_dialogVisible2 = false;
      }
    );
  },
};
</script>

<style lang="scss" scoped>
.main {
  padding-top: 10px;
}
.el-header {
  line-height: 30px;
}
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  line-height: 60px;
  text-align: center;
}

.el-aside {
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  height: auto;
  margin-bottom: 0px;
  padding: 10px 10px;
  width: 45%;
}

.el-main {
  background-color: #f0f2f5;
  color: #333;
  text-align: center;
  padding: 10px 10px;
  height: auto;
}

body > .el-container {
  margin-bottom: 0px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
.actiontable {
  width: 100%;
  height: 100%;
  max-height: 660px;
  overflow: auto;
}
.moduletabe {
  width: 100%;
  height: 100%;
  max-height: 745px;
  overflow: auto;
}
.pagination {
  background-color: white;
  height: 85px;
  padding-top: 25px !important;
  margin-top: inherit;
}
.rightdiv {
  background-color: white;
  padding-top: 35px;
  padding-left: 35px;
  border-radius: 8px;
}
.midText {
  position: absolute;
  left: 50%;
  background-color: #ffffff;
  padding: 0 15px;
  transform: translateX(-50%) translateY(-50%);
}
.text {
  font-size: 14px;
}

.item {
  /* margin-bottom: 18px; */
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin-bottom: 6px;
}
.newinfodiv {
}
.Dividingline {
  margin-left: -35px;
  margin-top: 10px;
  border-bottom: 1px solid #e6e6e6;
}
.oldinfocontent {
  margin-top: 10px;
  padding-bottom: 25px;
}
.bllno_sttdiv {
  display: flex;
  justify-content: space-between;
}
.bllnodiv {
}
.bllnodiv .bllnospan {
  font-size: 18px;
  font-weight: 400;
  line-height: 31px;
  color: #409eff;
  text-align: left;
}
.bllnodiv .bllnoname {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #c3cad2;
  text-align: left;
  width: 80%;
}
.sttdiv {
  border-radius: 44px 0px 0px 0px;
  width: 20%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.sttdiv .sttname {
  font-size: 18px;
  font-weight: 400;
  line-height: 31px;
  color: #ffffff;
}
.linediv {
  width: 100%;
  height: 0;
  border-bottom: 1px dashed #e6e6e6;
  margin-top: 20px;
}
.infocontent_line {
  margin-top: 20px;
  display: flex;
  // max-height: 150px;
  // overflow: auto;
  justify-content: flex-start;
  text-align: left;
  word-break: break-all; //字体自动换行，修复线上文字过长点击消失的问题
}

.infocontent_item_1 {
  font-size: 14px;
  width: 30%;
}
.infocontent_item_2 {
  font-size: 14px;
  width: 40%;
}
.infocontent_item_3 {
  font-size: 14px;
  width: 30%;
}
.infocontent_item_auto {
  font-size: 14px;
}
.infocontent_item_name {
  color: #959ea8;
}
.infocontent_item_content {
  color: #304156;
}
.newinfodiv .dialog-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
  padding-bottom: 10px;
}
.oldinfodiv .historydiv {
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #999999;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 10px;
  margin-left: -20px;
}
.refusediv {
  padding-left: 10px;
  background: #f5f5f5;
  border-radius: 4px;
  padding-top: 5px;
  margin-top: 10px;
  padding-bottom: 10px;
}
.cfg_test {
  width: 60%;
  margin: 0px auto;
  height: 100px;
  height: 100%;
}
.cfg_test_pyt_title {
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 24px;
  color: #304156;
  opacity: 1;
  float: left;
}
.cfg_test_res_title {
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: bold;
  line-height: 24px;
  color: #304156;
  opacity: 1;
  float: right;
  width: 300px;
}
.cfg_test_pyt {
  float: left;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 24px;
  color: #304156;
  opacity: 1;
}
.cfg_test_res {
  float: right;
  width: 300px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 24px;
  color: #1ab448;
  opacity: 1;
}
.cfg_test_res_error {
  float: right;
  width: 300px;
  height: 14px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 24px;
  color: #e8534e;
  opacity: 1;
}
.cfg_divinlinecls {
  display: flex;
  justify-content: space-between;
  opacity: 1;
  line-height: 20px;
  margin-top: 15px;
}
.cfg_test_res_errormsg {
  height: 12px;
  font-size: 12px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 20px;
  color: #666666;
  opacity: 1;
}
.cfg_errimg {
  top: 1px;
  position: relative;
  cursor: pointer;
}
.cfg_act {
  margin: 0px auto;
}
.cfg_act_test {
  display: flex;
  margin: 10px 0px 15px 10px;
  overflow: hidden;
}
.cfg_act_test .cfg_act_test_word {
  width: 300px;
  font-size: 14px;
  font-family: Source Han Sans CN;
  font-weight: 400;
  line-height: 34px;
  color: #304156;
  opacity: 1;
  display: flex;
}
.cfg_act_test_word1 {
  width: 90px;
  display: flex;
}
.cfg_act_test_word2 {
  width: 30px;
  display: block;
}
.cfg_act_test_word3 {
  width: 70px;
  display: block;
}

.pay_input {
  display: -webkit-box;
  display: -ms-flexbox;
  /* display: flex; */
  width: 220px;
  float: left;
}
.pay_button {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* width: 300px; */
  float: left;
}
.Scroll {
  max-height: 150px;
  overflow: auto;
}
</style>

<style>
.cpnActCfgBll_dialog .el-dialog__header {
  padding: 0px;
  padding-bottom: 0px;
}
.cpnActCfgBllApproved_dialogVisible .el-dialog__header {
  padding: 0px;
  padding-bottom: 0px;
}
.cpnActCfgBllApproved_dialogVisible .first_title {
  margin: 0px 0px 30px 0px;
}
.cfg_act .el-input--medium {
  margin-right: 15px;
}
.cfg_act_test .el-checkbox-button__inner {
  opacity: 1;
  border-radius: 18px !important;
  margin: 0px 10px 0px 10px;
}
.cfg_act_test .el-checkbox-button.is-checked .el-checkbox-button__inner {
  color: #fff;
  background-color: #1ab448;
  border-color: #1ab448;
  -webkit-box-shadow: -1px 0 0 0 #1ab448;
  box-shadow: -1px 0 0 0#1AB448;
}
.cfg_act_test .el-checkbox-button:first-child .el-checkbox-button__inner {
  border-left: 1px solid#1ab448;
  border-radius: 4px 0 0 4px;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}
.cfg_act_test .el-checkbox-button.is-focus .el-checkbox-button__inner {
  border-color: #1ab448;
}
.cfg_act_test .el-checkbox-button__inner {
  border-color: #1ab448;
  color: #1ab448;
}

.cpnActCfgBllApproved_dialogVisible .el-textarea__inner {
  height: 200px;
}
</style>
